13. CSS Animations

I. @keyframes

Explanation: @keyframes se hum animation ka flow define karte hain — jaise element kaise start karega aur kaise end karega.

<style> @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .box { width: 150px; height: 150px; background: orange; animation: fadeIn 2s ease-in-out; } </style> <div class="box"></div> Run Code

II. Animation Properties

Explanation: Animation ke liye kuch important properties hote hain:

• animation-name: @keyframes ka naam
• animation-duration: Animation kitni der chale
• animation-delay: Kab start ho
• animation-iteration-count: Kitni baar chale
• animation-direction: normal, reverse, alternate
• animation-fill-mode: Animation ke baad element ka state

<style> @keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(200px); } } .box { width: 100px; height: 100px; background: #3498db; animation-name: moveRight; animation-duration: 3s; animation-delay: 0.5s; animation-iteration-count: 2; animation-direction: alternate; animation-fill-mode: forwards; } </style> <div class="box"></div> Run Code

III. Animation Timing Functions

Explanation: Timing functions define karti hain animation ki speed curve — jaise slow start, fast end, etc.

• linear
• ease
• ease-in
• ease-out
• ease-in-out

<style> @keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-60px); } 100% { transform: translateY(0); } } .ball { width: 50px; height: 50px; background: crimson; border-radius: 50%; animation: bounce 1s ease-in-out infinite; } </style> <div class="ball"></div> Run Code

IV. Infinite Loop Animations

Explanation: Jab aapko animation continuously chahiye ho, to animation-iteration-count: infinite; use karte hain.

<style> @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .loader { width: 60px; height: 60px; border: 6px solid lightgray; border-top: 6px solid #1cc9be; border-radius: 50%; animation: rotate360 1s linear infinite; } </style> <div class="loader"></div> Run Code